<template>
  <div class="page-warp-view f">
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-workBench-header"></div>
    <div class="vm-workBench-container" ref="warpper">
      <div class="content">
        <div class="vm-workBench-warp">
          <div class="vm-workBench-content">
            <div class="all" @click="$router.push('/examine')">
              <p>{{ AllTotal }}</p>
              <h6>全部</h6>
            </div>
            <div class="pending" @click="$router.push('/examine')">
              <p style="color: #fe030a;">{{ pendingTotal }}</p>
              <h6>待处理</h6>
            </div>
            <div class="processed" @click="$router.push({path: '/examine', query: { examineToggle:1 }})">
              <p style="color: #22a9fb;">{{ processedTotal }}</p>
              <h6>已处理</h6>
            </div>
          </div>
        </div>
        <div class="vm-item-warp">
          <!--我常用的 -->
          <div class="vm-workBench-item">
            <div class="vm-item-header" style="margin-left: 0.133333rem;">
              <h5>我常用的</h5>
              <span class="add" @click="edit = !edit;">
                <img src="../../static/images/add.png" alt="" v-if="!edit">
                <img src="../../static/images/minus.png" alt="" v-if="edit">
              </span>
            </div>
            <div class="vm-item-body">
              <ul>
                <li
                @click="work_benchToCarygory(item.router)"
                v-for="(item,key) in editDataArr"
                :key="key"
                :class="{'mt0':key >=4 }"
                v-if="item.show">
                  <i :class="['vm-desk-icon',item.iconClass]">
                    <span :class="[{'edit_add': edit && !item.minus},{'edit_minus': edit && item.minus}]" @click="removeEdit(item)"></span>
                  </i>
                  <p>{{ item.dTitle }}</p>
                </li>
                <li
                class="addRectangle"
                v-if="editDataLock"
                :class="{'mt0':editDataArr.length >=4 }"
                ></li>
              </ul>
            </div>
          </div>
          <div class="vm-workBench-item" v-for="(list, key) in deskData" :key="key">
            <div class="vm-item-header">
              <h5><em class="line" :style="'background-color:' + list.lineC+ ';'"></em>{{list.title}}</h5>
            </div>
            <div class="vm-item-body">
              <ul>
                <li
                @click="work_benchToCarygory(item.router)"
                :class="{'mt0':key >=5 }"
                v-for="(item, key) in deskData[key].data"
                v-if="item.show"
                :key="key">
                  <i :class="['vm-desk-icon',item.iconClass]">
                    <span :class="[{'edit_add': edit && !item.minus},{'edit_minus': edit && item.minus}]" @click="addEdit(item)"></span>
                  </i>
                  <p>{{ item.dTitle }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vm-common-footer></vm-common-footer>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import vmCommonFooter from '@/components/vm-common-footer' // footer 组件
import { getWorkflowList, getWorkflowListNext } from '@/api/examine.js'
import { setTimeout, setInterval } from 'timers';
export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        edit: false, // 是否编辑状态, true则可以添加及删除。 默认false
        // 添加编辑数据
        editDataSet: new Set(), // 去重
        editDataArr: new Array(), // 已添加我常用的数据
        deskData: [
          {
            title: '供应商管理',
            lineC: '#fe9801',
            code: 'GYSGL_01',
            data:[{ dTitle: '供应商管理', iconClass: 'icon_aam', code: 'GYSGLLB_01', childCode: 'GYSGLLB_01', router: '/work_bench/vendor/vendor_manageList'},
                  { dTitle: '供应商审核', iconClass: 'icon_check', code: 'GYSSHLB_01', childCode: 'GYSSHLB_01', router: '/work_bench/vendor/vendor_checkList'}
            ]
          },
          {
            title: '物料管理',
            lineC: '#f1d348',
            code: 'WLGL_01',
            data:[{ dTitle: '物料列表', iconClass: 'icon_supplies_list', childCode:'WLLB_01', router: '/work_bench/material/material_list'},
              { dTitle: '价格库', iconClass: 'icon_price', childCode: 'WZJGK_01'}
            ]
          },
          {
            title: '项目及设备部位管理',
            lineC: '#ace673',
            code: 'XMGLZC_01',
            data:[{ dTitle: '项目部位管理', iconClass: 'icon_project_handle', childCode:'XMGL_01', router: '/work_bench/projectmanage/item_manageList'},
              { dTitle: '设备工艺部位', iconClass: 'equipment_process', childCode:'SBGL_01'}
            ]
          },
          {
            title: '需求与计划管理',
            lineC: '#5fd8f0',
            code: 'XQYJHGL_01',
            data:[{ dTitle: '需求计划', iconClass: 'icon_require_plan', childCode: 'XQJHGL_01', router: '/work_bench/wantplan/demand_plan'},
              { dTitle: '采购计划', iconClass: 'icon_purchase_plan', childCode: 'CGJHGL_01', router: '/work_bench/wantplan/purchase_plan'},
              { dTitle: '采购方案', iconClass: 'icon_plan_scheme', childCode: 'CGFAGL_01', router: '/work_bench/wantplan/purchase_scheme'}
            ]
          },
          {
            title: '采购询源工具与方案',
            lineC: '#fca197',
            code: 'CGFS_01',
            data:[{ dTitle: '方案列表', iconClass: 'icon_scheme_list', childCode: 'CGFAFGG_01'},
              { dTitle: '招投标', iconClass: 'icon_bid', childCode: 'ZTB_01', router:'/work_bench/common_level_list?pageTitle=招投标&pageType=bid'},
              { dTitle: '竞价比', iconClass: 'icon_price_ratio', childCode: 'JJGL_01', router:'/work_bench/common_level_list?pageTitle=竞比价列表&pageType=cpc'},
              { dTitle: '询价比', iconClass: 'icon_inquiry_ratio', childCode: 'XBJCG_01', router:'/work_bench/common_level_list?pageTitle=询价&pageType=enquiry_view'},
              { dTitle: '单一来源', iconClass: 'icon_single', childCode: 'DYLYCG_01', router:'/work_bench/common_level_list?pageTitle=单一来源&pageType=singleSource_view'},
              { dTitle: '竞争性谈判', iconClass: 'icon_competitve', childCode: 'JZXTP_01', router:'/work_bench/common_level_list?pageTitle=竞争性谈判&pageType=competitiveNegotiation_view'}
            ]
          },
          {
            title: '供应链管理',
            lineC: '#f1d348',
            code: 'GYL_01',
            data:[{ dTitle: '采购管理', iconClass: 'icon_purchase_handle', childCode: 'CGGL_01', router:'/work_bench/common_level_list?pageTitle=采购管理&pageType=purchasingView' },
              { dTitle: '库存管理', iconClass: 'icon_inventory_handle', childCode: 'KCGL_01', router:'/work_bench/common_level_list?pageTitle=库存管理&pageType=warehouseView'},
              { dTitle: '仓库管理', iconClass: 'icon_store_handle', childCode: 'CKGL_01', router:'/work_bench/common_level_list?pageTitle=仓库管理&pageType=stockView'}
            ]
          },
          {
            title: '合同管理',
            lineC: '#6fe3d1',
            code: 'HTGL_01',
            data:[{ dTitle: '合同列表', iconClass: 'icon_supplier_vendor', childCode: 'HTLB_01' ,router:'/work_bench/contractmanage/contract_list'},
              { dTitle: '合同审理', iconClass: 'icon_supplier_handle', childCode: 'HTSH_01'}
            ]
          }
        ], // 本地工作台数据
        editDataLock: false, // 是否显示添加框状态 >= 7 为false 否则true 显示添加框状态
        editProhibition: true, // 是否可以添加我常用的工作台，初始化可以添加。 >= 7 不可添加
        pendingTotal: 0,
        processedTotal: 0
      }
    },
    created () {
      this.getExamineTotal();
      // 根据当前登录用户表对工作台权限判断
      this.currentUserAuthority();
      // 获取用户我常用的数据
      this.getLocalStorageEditData();
    },
    computed: {
      AllTotal:{
        get () {
          return parseInt(this.pendingTotal) + parseInt(this.processedTotal);
        }
      }
    },
    methods: {
      /*
      *   工作台权限判断
      *
      *   1. 获取本地localStorage当前用户登录权限表
      *   2. 该分类的大类权限, 循环 authority 取code,然后循环本地deskData数据,与当前的code作比较,如果相等则存在该权限,不存在则移除.
      *   3. 如果用户子类有权限，则当前子类show为true，渲染条件为当前子类show为true。
      *
      * */
      currentUserAuthority () {
        const authority = JSON.parse(window.localStorage.getItem('authorityAll')); // 当前用户权限表
        const deskData = this.deskData;
        this.deskData = new Array();

        authority.forEach((item, index, arr) => {
          let authority = item;
          let authorityChild = item.child;
          let deskDataItem;
          let deskDataChildItem;
          // 判断该分类的大类权限
          deskData.forEach((item, index, arr) => {
            deskDataItem = item;
            deskDataChildItem = item.data;
            if ( Object.is(authority.code, deskDataItem.code) ) {
              this.deskData.push(deskDataItem);
            }
          });

          for(let n of deskData) {
            n.data.forEach(item => {
              let deskChildItem = item;
              authorityChild.forEach( item => {
                let authorityChildItem = item;
                if ( Object.is(deskChildItem.childCode, authorityChildItem.code) ) {
                  deskChildItem.show = true;
                }
              })
            })
          }
        });
      },
      // 获取localStorage的editData数据
      getLocalStorageEditData () {
        // 转换为数组或对象
        this.editDataArr = JSON.parse(window.localStorage.getItem('deskEditData') || '[]');
        // 遍历浏览器本地存储，循环并添加到set中
        this.editDataSet.clear();
        this.editDataArr.forEach(item => {
          this.editDataSet.add(item);
        });
        this.editDataSet.size >= 7 ? this.editDataLock = false : this.editDataLock = true;
        // 根据本地localStorage我常用的数据与本地数据遍历,如果相等本地数据item.minus为true
        let deskData = this.deskData; // 本地所有数据
        let editDataArr = this.editDataArr; // 我已常用数据
        for ( let item of deskData  ) {
          item.data.forEach((item, key, arr) => {
            for ( let n of editDataArr ) {
              if( Object.is(n.dTitle, item.dTitle) ) {
                item.minus = true;
              }
            }
          })
        }
      },
      /*
      * 1.item.minus 为false时添加该数据。
      *   item.minus 为true时删除该数据。
      * 2.使用set数据结构，进行避免数据重复添加后转换为数组。
      * */
      addEdit (item) {
        let that = item;
        let editProhibition = this.editProhibition;
        if (this.editDataSet.size >= 8) {
          this.$toast('工作台只能添加八个我常用的功能~');
        } else if ( this.editDataSet.size >= 7 ) {
          this.editDataLock = false;
          this.editProhibition = false;
        }
        if ( !item.minus && editProhibition ) {
          // 点击工作台添加我常用的
          item.minus = true;
          this.editDataSet.add(item);
          this.editDataArr = [...this.editDataSet];
        } else if( item.minus && editProhibition ) {
          // 点击工作台删除我常用的
          item.minus = false;
          this.editDataSet.delete(item);
          let thatIndex = this.editDataArr.findIndex((item, key, arr) => {
            return Object.is(item.dTitle,that.dTitle);
          });
          if ( thatIndex != -1 ) {
            this.editDataArr.splice(thatIndex,1);
            this.editProhibition = true;
            this.editDataLock = true;
          }
        }
        // 清空set数据,避免出现bug
        this.editDataSet.clear();
        this.editDataArr.forEach(item => this.editDataSet.add(item));
        let editDataArrStr = JSON.stringify([...this.editDataSet]);
        window.localStorage.setItem('deskEditData',editDataArrStr);
      },
      // 用户点击我常用的删除该数据,获取该数据的索引，删除该数据，循环原数组，改变minus状态
      removeEdit (item) {
        let that = item;
        let editDataArr = this.editDataArr;
        let deskData = this.deskData;
        let thatIndex = this.editDataArr.findIndex( (item, key, arr) =>{
          return item == that;
        });
        if ( thatIndex != -1 ) {
          editDataArr.splice(thatIndex,1);
          this.editDataSet.delete(item);
          this.editDataLock = true;
          this.editProhibition = true;
          for ( let item of deskData ) {
            item.data.forEach((item, key, arr) => {
              if ( Object.is(that.dTitle,item.dTitle) ) {
                item.minus = false;
              }
            })
          }
          let editDataArrStr = JSON.stringify(this.editDataArr);
          window.localStorage.setItem('deskEditData',editDataArrStr);
        }
      },
      // 数组去重
      uniq(array) {
        var temp = []; //一个新的临时数组
        for (var i = 0; i < array.length; i++) {
          if (temp.indexOf(array[i]) == -1) {
            temp.push(array[i]);
          }
        }
        return temp;
      },
      // 获取审批工作台总数
      async getExamineTotal () {

        let pendingTotal = await getWorkflowList().then(res => res.data.total).catch((err) => {
          this.processedTotal = 0;
        });
        let processedTotal = await getWorkflowListNext().then(res => res.data.total).catch((err) => {
         this.processedTotal = 0;
        });
        if (pendingTotal != 'undefined' && processedTotal != 'undefined') {
          this.pendingTotal = pendingTotal;
          this.processedTotal = processedTotal;
        }
      },
      work_benchToCarygory (r) {
        // 判断在编辑状态时，不可跳转，防止用户操作编辑与页面行为冲突。
        !this.edit && this.$router.push({
          path:r
        })
      }
    },
    mounted () {
    },
    components: {
        'vm-common-header': vmCommonHeader,
        'vm-common-footer': vmCommonFooter
    }
}
</script>

<style>
  body {
    overflow: scroll !important;
  }
</style>

<style lang="scss" scoped>

.vm-header-container {
  z-index: 9999 !important;
  background: url("../../static/images/desk_bg.png") no-repeat !important;
  background-size: 100% 403px !important;
}
.vm-workBench-header {
  top: 0;
  left: 0;
  position:  fixed;
  width: 100%;
  height: 390px;
  background: url("../../static/images/desk_bg.png") no-repeat;
  background-size: cover !important;
}
.vm-workBench-container {
  padding-bottom: 90px;
  margin-top: 320px;
  position: absolute;
  z-index: 999;
  width: 100%;
  top: 0;
  background-size: 0 390px;
  overflow-y: scroll;
  overflow-x: hidden;
  .vm-workBench-warp {
    position: relative;
    padding: 0 30px;
    z-index: 999;
    height: 140px;
    .vm-workBench-content {
      box-shadow: 0 2px 1px #e3e3e3;
      border-radius: 15px; /* no */
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      align-items: center;
      div {
        flex: 1;
        display: flex;
        flex-direction: column;
        p {
          height: 55px;
          font-size: 36px;
          color: #666;
        }
        h6 {
          font-size: 28px;
          color: #141414;
          font-weight: bold;
        }
      }
    }
  }
  .vm-item-warp {
    background-color: #f4f4f4;
  }
  .vm-workBench-item {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    h5 {
      display: flex;
      align-items: center;
      color: #141414;
      font-weight: bold;
      font-size: 28px;
      .line {
        content: '';
        height: 24px;
        width: 6px;
        display: inline-block;
        margin-right: 15px;
      }
    }
    .vm-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      width: 100%;
      padding-left: 10px;
      /*border-bottom: 1px solid #e1e1e1; !* no *!*/
      .add {
        width: 20px; /* no */
        height: 20px; /* no */
        margin-right: 30px;
        img {
          width: 100%;
        }
      }
    }
    .vm-item-body {
      min-height: 187px;
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e1e1e1; /* no */
      ul {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 25%;
          height: 150px;
          margin: 50px 0;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-around;
          p {
            font-size: 24px;
            color: #333333;
          }
          &.mt0 {
            margin-top: 0;
          }
          &.addRectangle {
            background: url(../../static/images/rectangle.png) no-repeat;
            background-size: 145px 125px;
            background-position: center;
          }
          i.vm-desk-icon {
            width: 1.2rem;
            height: 1.2rem;
            position: relative;
            span.edit_add {
              position: absolute;
              content: '';
              display: inline-block;
              width: 30px;
              height: 30px;
              background: url("../../static/images/edit_add.png") no-repeat;
              background-size: 30px 30px;
              right: -30px;
            }
            span.edit_minus {
              position: absolute;
              content: '';
              display: inline-block;
              width: 30px;
              height: 30px;
              background: url("../../static/images/edit_minus.png") no-repeat;
              background-size: 30px 30px;
              right: -30px;
            }
          }
          i.vm-desk-icon.icon_aam {
            background-position: -4.24rem 0;
          }
          i.vm-desk-icon.icon_check {
            background-position: -4.24rem -1.253333rem;
          }
          i.vm-desk-icon.icon_supplies_list {
            background-position: -5.493333rem 0;
          }
          i.vm-desk-icon.icon_project_handle {
            background-position: -6.746666rem 0;
          }
          i.vm-desk-icon.icon_require_plan {
            background-position: -10.506666rem 0;
          }
          i.vm-desk-icon.icon_purchase_plan {
            background-position: -10.506666rem -2.506666rem;
          }
          i.vm-desk-icon.icon_plan_scheme {
            background-position: -10.506666rem -1.253333rem;
          }
          i.vm-desk-icon.icon_bid {
            background-position: -11.76rem -6.266666rem;
          }
          i.vm-desk-icon.icon_price_ratio {
            background-position: -11.76rem -5.013333rem;
          }
          i.vm-desk-icon.icon_inquiry_ratio {
            background-position: -11.76rem -3.76rem;
          }
          i.vm-desk-icon.icon_competitve {
            background-position: -11.76rem -2.506666rem;
          }
          i.vm-desk-icon.icon_single {
            background-position: -11.76rem -1.253333rem;
          }
          i.vm-desk-icon.icon_purchase_handle {
            background-position: -9.253333rem 0;
          }
          i.vm-desk-icon.icon_store_handle {
            background-position: -9.253333rem -1.253333rem;
          }
          i.vm-desk-icon.icon_inventory_handle {
            background-position: -9.253333rem -2.506666rem;
          }
          i.vm-desk-icon.icon_supplier_vendor {
            background-position: -8rem 0;
          }
          i.vm-desk-icon.icon_supplier_handle {
            background-position: -8rem -1.28rem;
          }
          i.vm-desk-icon.icon_price {
            background-position: -5.493333rem -1.253333rem;
          }
          i.vm-desk-icon.equipment_process {
            background-position: -6.746666rem -1.253333rem;
          }
          i.vm-desk-icon.icon_scheme_list {
            background-position: -11.76rem 0;
          }
        }
      }
    }
  }
}
</style>


